How to Consume Complex JSON Data in a List
Description
Learn how to work with complex hierarchical JSON data in a List control.
Discussion
Hierarchical JSON is a JSON object that contains sub-arrays of child data. For example:
[
{"Firstname": "John", "Lastname" : "Smith", "City" : "Boston", "State" : "MA", "Children": [
{"Name" : "Callie", "Age" : 5},
{"Name" : "Griffin", "Age" :3},
{"Name" : "Luke", "Age" : 1}
]
},
{"Firstname": "Henry", "Lastname" : "Rhodes", "City" : "New York", "State" : "NY", "Children": [
{"Name" : "Howard", "Age" : 15},
{"Name" : "Robert", "Age" : 11}
]
},
{"Firstname": "Allison", "Lastname" : "Berman", "City" : "Los Angeles", "State" : "CA", "Children": [
{"Name" : "Jeff", "Age" : 35},
{"Name" : "Roxanne", "Age" :33},
{"Name" : "Claudia", "Age" : 31},
{"Name" : "Denzel", "Age" : 11}
]
}
]There are two ways the child data can be shown in a List. The first is to use Client-side Templates to display the sub array of data in the List control's layout:
{Children}
{Name} {Age}<br>
{/Children}{Children}...{/Children} is a scope placeholder. It indicates that the template should loop over all of the rows in the "Children" array for the JSON data, displaying the Name and Age followed by a newline (<br>).
The second method is to populate a List control with the data in the Child array. To make this easy, the target List control can be defined with static data. Providing static data (e.g. "Name|Age") allows you to create the layout for the List control.
From the parent list, you can then use JavaScript in the List's "onSelect" event. For example, the following will populate the Child list with the data from the sub-array in the selected row.
populateChild(this.selectionData[0]);
The populateChild() JavaScript function is shown below. It takes extracts the Children array from the data submitted to the function and populates the child list ('list2') with the data.
function populateChild(d) {
var _d = d.Children
var lChild = {dialog.object}.getControl('list2');
lChild.populate(_d)
}For detailed information about how the two methods described above work, watch the video below.
Consuming Complex (Hierarchical) JSON Data in a List
The JSON data you display in a List control may contain nested arrays of data. In this video we show two different ways in which the nested arrays of data can be displayed.
See Also